import React, { useEffect, useState } from 'react';
import { Button, Form, Input, DatePicker, Space, Select,Table, message,Modal,Pagination  } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import {getList,getState,getDelete,getDeleteall,getType} from '../apis/questions'
import '../assets/css/questions/questions.css';
import Details from '../components/questions/details'
const { confirm } = Modal;
const Index: React.FC = () => {

  // 删除
  const del = (id:number) => {
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: '确定要删除这条数据吗',
      onOk:async()=> {
        let res:any = await getDelete({id:id})
        console.log(res)
        if(res.errCode === 10000){
          message.success('删除成功')
          getData()
        }else{
          message.error(res.errMsg)
        }
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  // 批删
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const dell = () => {
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: '确定要删除此数据吗',
      onOk:async()=> {
        let res:any = await getDeleteall({ids:selectedRowKeys})
        console.log(res)
        if(res.errCode === 10000){
          message.success('删除成功')
          getData()
        }else{
          message.error(res.errMsg)
        }
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  
  //详情
  const [open, setOpen] = useState(false);

  const showModal = () => {
    setOpen(true);
  };

  const handleCancel = () => {
    setOpen(false);
  };
  // 表格
  const columns: ColumnsType<any> = [
    {
      title: 'id',
      dataIndex: 'id',
      align:'center',
    },
    {
      title: '问题类型',
      dataIndex: 'typename',
      key: 'typename',
      align:'center',
      render: (_,record) => (<div className='parti'>
        <div className='dan' onClick={showModal}>{record.typename}</div>
        <Modal
          width="650px"
          open={open}
          onCancel={handleCancel}
          footer={[]}
        >
         <Details getOpen={record}></Details>
      </Modal>
      </div>)
    },
    {
      title: '问题地址',
      dataIndex: 'address',
      align:'center',
    },{
      title: '问题描述',
      dataIndex: 'content',
      align:'center',
    },
    {
      title: '处理状态',
      dataIndex: 'statename',
      align:'center',
    },
    {
      title: '业主名称',
      dataIndex: 'username',
      align:'center',
    },
    {
      title: '业主电话',
      dataIndex: 'tel',
      align:'center',
    },
    {
      title: '维修日期',
      dataIndex: 'addtime',
      align:'center',
    },
    {
      title: '操作',
      dataIndex: 'id',
      align:'center',
      render:(id:number)=>(
        <div>
          <Button className='botton' type="primary" danger onClick={()=>del(id)}>删除</Button>
        </div>
      )
    },
  ];

  // 状态
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  const [states,setState] = useState<any>()
  const getStates = async()=>{
    let res:any = await getState({}).catch(()=>{})
    console.log(res);
    if(res && res.errCode === 10000){
      setState(res.data.list)
    }
  }
  //类型
  const [types,setType] = useState<any>()
  const getTypes = async()=>{
    let res:any = await getType({}).catch(()=>{})
    // console.log(res);
    if(res && res.errCode === 10000){
      setType(res.data.list)
    }
  }
  //查询
  interface Params{
    key:string,//关键字
    page:number,//页数
    psize:number,//条数
    tel:string,//电话
    address:string,//地址
    state:number,//状态
    type:number,//类型
    userid:any,//居民
  }
  const [params,setParams] = useState<Params>({
    key:'',
    page:1,
    psize:10,
    tel:'',
    address:'',
    state:states,
    type:types,
    userid:'',
  })
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
    setParams({...params,...values})
    console.log(params)
  };
  //时间
  const { RangePicker } = DatePicker;
  // 列表
  const [list,setList] = useState<any>([])
  const getData = async()=>{
    let res:any = await getList(params).catch(()=>{})
    console.log(res)
    if(res && res.errCode === 10000){
      setList(res.data.list)
      setTotal(res.data.counts)
    }
  }
  //分页
  const [total,setTotal] = useState(0)
  const changePagination = (page:any,pSize:any)=>{
      setParams({...params, page, psize: pSize})
  }
  //调用
  useEffect(()=>{
    getData()
    getStates()
    getTypes()
  },[params])
  return (
    <div className="questions">
      <div className="header">
          <span className="title">公告列表</span>
      </div>
      <div className="top">
      <Form name="complex-form" onFinish={onFinish}>
      <div className="topTop">
          <Form.Item label="投诉标题" name="key">
            <Input placeholder="投诉标题" />
          </Form.Item>
          <Form.Item label="地址" name="address">
            <Input placeholder="地址" />
          </Form.Item>
          <Form.Item label="电话" name="tel">
            <Input placeholder="电话" />
          </Form.Item>
          <Form.Item label="按时间查询">
            <Space direction="vertical" size={12}>
              <RangePicker   />
            </Space>
          </Form.Item>
          <Form.Item label="投诉状态" name="state">
            <Select
              placeholder="请选择"
              style={{ width: 120 }}
              onChange={handleChange}
              allowClear
              fieldNames={{label:'name',value:'id'}}
              options={states}
            />
          </Form.Item>
        </div>
        <div className="topBottom">
          <Form.Item label="投诉类型" name="type">
            <Select
              placeholder="请选择"
              style={{ width: 120 }}
              onChange={handleChange}
              allowClear
              fieldNames={{label:'name',value:'id'}}
              options={types}
            />
          </Form.Item>
          <Form.Item label="居民" name="userid">
            <Input placeholder="请输入关键字" />
          </Form.Item>
          <div className="bottomRight">
            <Button type="primary" htmlType="submit">
              查询
            </Button>
          </div>
        </div>
      </Form>
      </div>
      <div className="center">
          <Button type="primary" danger onClick={dell}>批量删除</Button>
      </div>
      <div className="table">
        <Table rowKey="id" rowSelection={rowSelection} columns={columns} dataSource={list} pagination={false}/>
      </div>
      <div className="Newcenter">
        <Pagination
            total={total}
            current={params.page}
            defaultCurrent={params.page}
            defaultPageSize={params.psize}
            showSizeChanger
            showQuickJumper
            pageSizeOptions={[10,15,20,40]}
            onChange={changePagination}
            showTotal={total => `共${total}条`}
        />
      </div>
    </div>
  );
};
export default Index;
